<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部部分 --> 
            <el-header>
                <el-row justify="space-between" align="middle">
                    <el-col :span="6">
                        <div class="breadcrumb">
                            <el-icon><Fold /></el-icon>
                            <span>数据统计</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="user-info">
                            <el-avatar :size="30" src="" />
                            <span class="username">admin</span>
                        </div>
                    </el-col> 
                </el-row>
            </el-header>
            <el-header class="white"></el-header>
            <!--内容部分-->
            <el-main>         
                <!--刷新部分-->
                <el-header class="refresh">
                    <el-button type="info" @click="handleRefresh">
                       <el-icon><Refresh /></el-icon>
                       刷新
                    </el-button>
                </el-header>
                <!--表格部分-->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="check_date" label="日期"></el-table-column>
                    <el-table-column prop="account_total_pay" label="账户总支出"></el-table-column>
                    <el-table-column prop="total_expenditure" label="打款总支出"></el-table-column>
                    <el-table-column prop="recycling_expense" label="回收用户支出"></el-table-column>
                    <el-table-column prop="holder_expense" label="持有人支出"></el-table-column>
                    <el-table-column prop="service_provider_expense" label="服务商支出"></el-table-column>
                    <el-table-column prop="holder_expense" label="管家支出"></el-table-column> <!-- 注意：prop重复，建议改为对应字段（如housekeeper_expense） -->
                    <el-table-column prop="total_expenditure" label="微信总打款"></el-table-column>
                    <el-table-column prop="successful_pay" label="微信成功打款"></el-table-column>
                    <el-table-column prop="failed_pay" label="微信失败打款"></el-table-column>
                    <el-table-column prop="account_type" label="账户类型"></el-table-column>
                    <el-table-column prop="remarks" label="备注"></el-table-column>
                </el-table>
                 <div class="demo-pagination-block">
                    <el-pagination
                    v-model:current-page="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
// 引入必要的图标和接口
import { ref } from 'vue'
import { Fold, Refresh } from '@element-plus/icons-vue' // 补充图标导入（避免图标不显示）
import { getyueList } from '@/components/Finance/DeviceStatisics'

// 1. 定义分页组件所需的属性（解决警告核心）
const currentPage4 = ref(1) // 当前页码（默认第1页）
const pageSize4 = ref(100)  // 每页条数（默认100条，与page-sizes第一个值一致）
const size = ref('default') // 分页器尺寸（可选：default/small/large）
const disabled = ref(false) // 是否禁用分页（默认不禁用）
const background = ref(true) // 是否显示背景色（默认显示）
const total = ref(0)        // 总数据条数（从接口返回后更新）

// 搜索栏
const search = ref('')

// 刷新页面函数
const handleRefresh = () => {
  window.location.reload()
}

// 表格数据
const tableData = ref([])

// 分页变更回调函数
const handleSizeChange = (val) => {
  pageSize4.value = val // 每页条数变更时更新
  getlist() // 重新请求数据（根据新的分页参数）
}

const handleCurrentChange = (val) => {
  currentPage4.value = val // 当前页码变更时更新
  getlist() // 重新请求数据（根据新的分页参数）
}

// 获取表格数据
let getlist = async () => {
    try {
        let data = {
            pageIndex: currentPage4.value, // 使用分页组件的当前页码
            pageSize: pageSize4.value      // 使用分页组件的每页条数
        }
        let res = await getyueList(data)
        console.log(res);
        tableData.value = res.dataset.list || [] // 避免无数据时报错
        total.value = res.dataset.total || 0     // 从接口获取总条数（关键：让分页器正确显示总页数）
    } catch (error) {
        console.log('获取数据失败：', error);
        tableData.value = []
        total.value = 0
    }
}

// 初始化加载数据
getlist()
</script>

<style lang="less" scoped>
/* 头部部分 */
.el-header{
    height: 40px;
    border-bottom: 1px solid rgb(187, 186, 186);
}
.time {
    display: inline-block;
    margin-right: 20px;
    :deep(.el-range-editor) {
        width: 285px !important;
        height: 25px;

        .el-range-input {
            font-size: 12px;
            height: 25px;
        }

        .el-range-separator {
            font-size: 12px;
        }
    }
}
.breadcrumb{
    display: flex;
    align-items: center;
}
.user-info{
    display: flex;
    align-items: center;
    gap: 8px;  /* 新增：用户名与头像间距 */
}
.white{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/*设备转让*/
.transfer{
    background-color: rgb(223, 120, 37);
    border-color: rgb(223, 120, 37);
}
/*内容部分*/
.el-main{
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*搜索部分*/
.search{
    width: 100%;
    border: none;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap:10px;
}
/*添加/刷新部分*/
.refresh{
    width: 100%;
    border: none;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: right;
}
/*表格部分*/
/*数据表格部分*/
:deep(.el-table) {
    width: 100% !important;
    
    .el-table__header-wrapper,
    .el-table__body-wrapper {
        width: 100% !important;
    }
    
    .el-table__header {
        width: 100% !important;
    }
    
    .el-table__body {
        width: 100% !important;
    }
    
    .el-table__row {
        height: 80px !important;
    }
    
    /* 确保表格列宽度生效 */
    .el-table__header th,
    .el-table__body td {
        text-align: center;
    }
}
/*分页器*/
.demo-pagination-block{
    width: 98%;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 20px;
}
</style>